<style>
    .form-verify{
        display:inline;
        width: 150px;
    }
    
    body {
        font-family: 'Helvetica', sans-serif;
        font-size: 16px;
        font-weight: 300;
        color: #888;
        text-align: center;
        background-color: #DADADA;
    }

    .inner-bg {
        padding: 100px 0 170px 0;
    }

    .form-box {
        margin-top: 35px;
    }

    .form-bottom-message {
        overflow: hidden;
        padding: 5px 25px;
        background: #eee;
        -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
        text-align: left;
        margin-top: 20px;
    }

    .form-bottom-message p {
        font-family: 'Helvetica', sans-serif;
        text-align: center;
        margin: 0;
        color: #000;
    }

    .form-top {
        overflow: hidden;
        padding: 0 25px 5px 25px;
        background: #eee;
        -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
        text-align: left;
    }

    .form-top-left {
        float: left;
        padding-top: 25px;
    }

    .form-title { 
        margin-top: 0;
    }

    .form-top-right {
        float: right;
        padding-top: 25px;
    }

    .form-bottom {
        padding: 25px 25px 20px 25px;
        background: #fff;
        -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
        text-align: left;
    }

    .form-bottom form textarea {
        height: 100px;
    }

    .form-bottom form button.btn {
        width: 100%;
    }

    .form-bottom form .input-error {
        border-color: #337ab7;
    }

    input[type="text"], 
    input[type="password"], 
    textarea, 
    textarea.form-control {
        height: 50px;
        margin: 0;
        padding: 0 20px;
        vertical-align: middle;
        background: #f8f8f8;
        border: 3px solid #ddd;
        font-size: 16px;
        font-weight: 300;
        line-height: 50px;
        color: #888;
        -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
        -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
        -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
    }

    textarea, 
    textarea.form-control {
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 30px;
    }

    input[type="text"]:focus, 
    input[type="password"]:focus, 
    textarea:focus, 
    textarea.form-control:focus {
        outline: 0;
        background: #fff;
        border: 3px solid #ccc;
        -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
    }

    input[type="text"]:-moz-placeholder, input[type="password"]:-moz-placeholder, 
    textarea:-moz-placeholder, textarea.form-control:-moz-placeholder { color: #888; }

    input[type="text"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, 
    textarea:-ms-input-placeholder, textarea.form-control:-ms-input-placeholder { color: #888; }

    input[type="text"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, 
    textarea::-webkit-input-placeholder, textarea.form-control::-webkit-input-placeholder { color: #888; }



    /*.login-form button.btn {
        height: 50px;
        margin: 0;
        padding: 0 20px;
        vertical-align: middle;
        background: #337ab7;
        border: 0;
        font-size: 16px;
        font-weight: 300;
        line-height: 50px;
        color: #fff;
        -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
        text-shadow: none;
        -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
        -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
    }*/

    /*.login-form button.btn:hover { opacity: 0.6; color: #fff; }

    .login-form button.btn:active { outline: 0; opacity: 0.6; color: #fff; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }

    .login-form button.btn:focus { outline: 0; opacity: 0.6; background: #337ab7; color: #fff; }

    .login-form button.btn:active:focus, button.btn.active:focus { outline: 0; opacity: 0.6; background: #337ab7; color: #fff; }*/

    .switch-login {
        margin-top: 30px;
    }

    .switch-login h4 {
        margin-bottom: 15px;
    }

    .checkbox {
        font-size: 14px;
    }
</style>

<template>
    <notice :notice.sync="notice"></notice>
    <div class="inner-bg">
        <div class="container">
            <!-- <div class="row">
                <div class="col-sm-8 col-sm-offset-2 text">
                    <h1><strong> 欢迎访问, 请先登录</strong></h1>
                </div>
            </div> -->

            <div class="row">
                <div class="col-lg-4 col-lg-offset-4 col-sm-6 col-sm-offset-3 form-box">
                    <div class="form-top">
                        <div class="form-top-left">
                            <h3 class="form-title">{{isTeacher?'教师登陆':'学生登陆'}}</h3>
                        </div>
                        <div class="form-top-right">
                            <a href="javascript:;" id="switch-ident" v-on:click="changState">切换身份<span class="glyphicon glyphicon-chevron-right"></span></a>
                        </div>
                    </div>
                    <div class="form-bottom">
                        <validator name="login">
                        <form novalidate role="form" action="" method="post" class="login-form">
                            <div class="form-group">
                                <label class="sr-only" for="form-username">用户名</label>
                                <input type="text" name="form-username" placeholder="请输入邮箱" class="form-username form-control" id="form-username" v-model="curInput.username" 
                                    @blur="onBlur('username')"
                                    v-validate:username="{
                                        required: {rule: true, message: '请输入用户名'},
                                        email: {rule: true, massage: ''}
                                    }">
                            </div>
                            <div class="form-group">
                                <label class="sr-only" for="form-password">密码</label>
                                <input type="password" name="form-password" placeholder="请输入密码" class="form-password form-control" id="form-password" v-model="curInput.psw" 
                                    @blur="onBlur('psw')"
                                    v-validate:psw="{
                                        required: {rule: true, message: '请输入密码'},
                                    }">
                            </div>
                            <!-- <div class="form-group">
                                <input type="text" name="form-verify" placeholder="请输入验证码" class="form-control form-verify" required>
                                <img id="verify-img" src="/Auth/getVerify" title="单击刷新" alt="单击刷新" onclick='this.src=this.src+"?r="+Math.random()'/>
                            </div> -->
                            <div class="checkbox">
                                <label>
                                    <input  type="checkbox" id="form-remember" v-model="curInput.remember"> 记住我
                                </label>
                                <a class="pull-right" href="">忘记密码</a>
                            </div>
                            <button type="submit" class="btn btn-primary" v-on:click="login" :disabled="!$login.valid">登陆</button>
                        </form>
                        </validator>
                    </div>
                    <div class="form-bottom-message">
                        <p>没有账号? <a href="/Account/register.html"> 点击注册</a></p>
                    </div>
                </div>
            </div>

            <!-- <div class="row">
                <div class="col-sm-6 col-sm-offset-3 switch-login">
                    <h4>切换身份登陆:</h4>
                    <div class="social-login-buttons">
                        <button class="btn btn-primary" style=""><li class="glyphicon glyphicon-user"></li> 学生登陆</button>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script>
    import Notice from '../../Component/Notice/Notice';
    import auth from '../../Component/Auth/auth.js';

    export default {
        created: function() {
            var user = auth.getUserAndPsw();
            if (user) {
                this.curInput = {username: user.id, psw: user.psw, remember: true};
                /*this.username = user.id;
                this.psw = user.psw;*/
                this.isTeacher = user.isTeacher;
            }
        },
        data () {
            return {
                curInput: {username: '', psw: '', remember: false},
                stuBak: {},
                teaBak: {},
                isTeacher: true,
                notice: {type: 0, msg: ""}
            }
        },
        methods: {
            login: function(e) {
                e.preventDefault();
                if (!this.$login.errors) {
                    this.$http.post('/index/login', 
                        {number: this.curInput.username, password: this.curInput.psw, remember: this.curInput.remember, isTeacher: this.isTeacher}).then(function(resp) {
                                if (resp.data.status === 1) {
                                    window.location.href = "/Index/index.html"
                                } else {
                                    this.notice = {type: 0,msg: resp.data.message} 
                                }
                        }, function(resp) {
                            // error callback
                            this.notice = {type: 0,msg: resp.statusText} 
                        })
                } else {
                    this.notice = {type: 0,msg: this.$login.errors[0].message};
                }
            },
            changState: function() {
                if (this.isTeacher) {
                    this.teaBak = this.curInput;
                    this.curInput = Object.assign({}, this.stuBak);
                } else {
                    this.stuBak = this.curInput;
                    this.curInput = Object.assign({}, this.teaBak);
                }
                this.isTeacher = !this.isTeacher;
            },
            onBlur: function(field) {
                if (field === 'username')
                    this.psw = '';
                this.notice = {type: 0,msg: this.$login[field].errors&&this.$login[field].errors[0].message};
            }
        },
        components: {
            Notice
        },
        validators: {
            email: {
                message: '请输入正确的邮箱地址',
                check: function (val) {
                    return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(val)
                  }
            }
        }
    }
</script>